Using the Toggle Button nodes

Use the Toggle Button nodes to create interactions through buttons that can have multiple toggle states. See Creating a toggle button with two states and Creating a toggle button with more than two states.

Use the Toggle Button 3D to create a 3D toggle button and the Toggle Button 2D to create a 2D toggle button. After you create a Toggle Button node you have to add another node to it to create a visual representation of the toggle button.

When you create a Toggle Button node, Kanzi by default adds the Toggle Button: Toggled On and Toggle Button: Toggled Off triggers to that node. When a Toggle Button node has focus, it receives click input from the keyboard keys Space, Enter, and Enter on the numeric pad. Use scripting functions to get and set the node that currently has focus in the project. See Scripting reference and Using triggers.

For example, to show the difference between the on and off states of a toggle button, you can:

• Switch the material or color of the visual representation of the toggle button.
• Attach two different visual representations of the toggle button and switch their visibility.
• Attach two different visual representations of the toggle button and transition between the two by animating their Blend Intensity property value.

To learn how to create a toggle button complete the toggle button tutorial. See Tutorial: Creating a toggle button.

Creating a toggle button with two states

To create a toggle button with two states:

1. In the Project press Alt and right-click the node where you want to create a toggle button and select either Toggle Button 3D, or Toggle Button 2D.
   Note that you can create a 3D node only inside 3D nodes, and 2D node only inside 2D nodes.
   
2. In the Project select the Toggle Button node and in the State Tools click Create State Manager to create a state manager in the Toggle Button node.
   
3. In the State Tools click Create State twice to create two states, double-click the name of each state, and rename the states.
   For example, name one state On and the other Off.
   The On state defines the state of your application when the toggle button is switched on, the Off state when the toggle button is switched off.
   
4. In the Project create a visual shape for the Toggle Button node, and set its appearance for when it is in the On state.
   For example, if you created a Toggle Button 2D node, add to that node an Image node which represents the indicator that shows when the toggle button is toggled on and off.
   
   
   
5. Position the indicator in the Preview and in the State Tools click above the On state to save the current appearance to that state.
   
6. Repeat the previous two steps to create the Off state for the toggle button.
   
   
7. In the State Tools click the <No Controller Property> dropdown menu and select the Button > Toggle State property.
   In a state manager the value of the property you select as the Controller Property defines the conditions when each state in a state group is active.
   
8. In the State Tools set the value of the controller property for each state.For the On state set the value to 1.For the Off state leave the value set to 0.
   
9. In the State Tools click Edit State Manager to deactivate the State Tools.
   
10. In the Preview when you click the visual representation of the toggle button, you toggle between the states you created, and the appearance of the toggle button changes.

Creating a toggle button with more than two states

To create a toggle button with more than two states:

1. In the Project press Alt and right-click the node where you want to create a toggle button and select either Toggle Button 3D, or Toggle Button 2D.
   Note that you can create a 3D node only inside 3D nodes, and 2D node only inside 2D nodes.
2. In the Project select the Toggle Button node and in the Properties add and set the Toggle State Count property to as many toggle states you want the toggle button to have.
   For example, to create a toggle button with three states, set the Toggle State Count property to 3.
   
3. In the Project select the Toggle Button node and in the State Tools click Create State Manager to create a state manager in the Toggle Button node.
4. In the State Tools click as many times as you want to create states, double-click the name of each state, and rename the states.
   For example, if you are creating a toggle button with three states name the first state First, the second state Second, and the third state Third. Each state defines the state of your application when the toggle button is in that state.
   
5. In the Project create a visual shape for the Toggle Button node, and set its appearance for when it is in the first state.
   For example, if you created a 3D toggle button, add a Text Block 3D and set the Text property to First.
6. In the State Tools click above the First state to save the current appearance to that state.
   
7. Repeat the previous two steps as many times as you have states in the toggle button. For every state set a different value for the Text property and save the value to a different state.
8. In the State Tools click the <No Controller Property> dropdown menu and select the Button > Toggle State property.
   In a state manager the value of the property you select as the Controller Property defines the conditions when each state in a state group is active.
   
9. In the State Tools set the value of the controller property for each state.
   For example, for a toggle button with three states, set the value for the First state to 0, for the Second state to 1, and for the Third state to 2.
   
10. In the State Tools click Edit State Manager to deactivate the State Tools.
11. In the Preview when you click the visual representation of the toggle button, you toggle between the states you created, and the appearance of the toggle button changes.

Setting the appearance of a Toggle Button 2D node

To set the appearance of 2D nodes:

• You can fill 2D nodes with a solid color, a texture, or a material. See Adjusting the appearance of 2D nodes.
• You can rotate a 2D node around all three axes to create a 3D perspective effect. See Creating a 3D perspective effect for 2D nodes.
• You can apply custom rendering to 2D nodes to create post-processing effects. See Applying custom rendering to 2D nodes.

Using the Toggle Button 3D node in the API

For details, see the ToggleButton3D class in the API reference.

Using the Toggle Button 2D node in the API

For details, see the ToggleButton2D class in the API reference.

See also

Tutorial: Creating a toggle button

Using the Toggle Button Group nodes

Using the Button nodes

Buttons

Open topic with navigation